<template>
  <div class="drag-edit-zone-pc" v-if="page" :style="scaleConStyles">
    <div ref="focusDom" class="drag-edit-zone-style" :style="sitePageStyles"
      @keydown.delete.exact="onDeleteComponent"
      @keydown.shift.exact="onKeyDownShift"
      @keyup.shift.exact="onKeyUpShift"
      @keydown.ctrl.c.exact="onCopyComponent"
      @keydown.ctrl.g.exact="onGroupComponent"
      @keydown.ctrl.shift.g.exact="onBreakupComponent"
      @keydown.up.exact="onKeyDownUp"
      @keydown.down.exact="onKeyDownDown"
      @keydown.left.exact="onKeyDownLeft"
      @keydown.right.exact="onKeyDownRight"
      @keydown.ctrl.up.exact="onTopAlign"
      @keydown.ctrl.shift.up.exact="onTopAlign"
      @keydown.ctrl.down.exact="onBottomAlign"
      @keydown.ctrl.shift.down.exact="onBottomAlign"
      @keydown.ctrl.left.exact="onLeftAlign"
      @keydown.ctrl.shift.left.exact="onLeftAlign"
      @keydown.ctrl.right.exact="onRightAlign"
      @keydown.ctrl.shift.right.exact="onRightAlign"
      tabindex="0">
      <div :style="getPageStyles(page)" class="wid-inherit">
        <draggable-generator
          v-for="(item) in page.components"
          :key="item.id"
          :item="item">
        </draggable-generator>
        <div v-if="rightMenu.isVisible" class="right-menu-con" :style="{top: rightMenu.top, left: rightMenu.left}">
          <ul v-if="isGroup">
            <li v-for="(compData) in componentData.components" :key="'group-' + compData.id" @click="onActiveRightEditMemu(compData)">{{getCompText(compData)}}</li>
          </ul>
          <ul v-else>
            <li @click.self.capture="onGroupComponent">创建组合</li>
            <li @click.self.capture="onBreakupComponent">解散组合</li>
            <li @click.self.capture="onLeftAlign">左对齐</li>
            <li @click.self.capture="onRightAlign">右对齐</li>
            <li @click.self.capture="onHorizontalCenterAlign">水平居中对齐</li>
            <li @click.self.capture="onVerticalCenterDistribute">垂直居中分布</li>
            <li @click.self.capture="onTopAlign">上对齐</li>
            <li @click.self.capture="onBottomAlign">下对齐</li>
            <li @click.self.capture="onDeleteComponent">删除</li>
            <li @click.self.capture="onCopyComponent">复制</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DraggableGenerator from '@/views/components/draggable-generator.vue'
import { coverImg } from '@/views/js/cover-img'
import { loadUtils } from '@/views/js/load-utils'
import { middle } from '@/views/js/middle'
import { mapState, mapGetters, mapActions } from 'vuex'
import { PAGE_TYPE_ } from '@/common/const'
import { PC_WID_HEI } from '@/common/const-dif'
import { bgPositionStyle } from '@/store/utils'

import { COMPONENT_TYPES } from '@/common/const-wb'
import { EventBus } from "@/store/index"
import { getPxOVwByValue } from '@/store/utils'

export default {
  name: "PcMiddle",
  components: {
    DraggableGenerator,
  },
  data () {
    return {
      scaleConStyles: {}
    }
  },
  mixins: [middle, loadUtils, coverImg],
  beforeMount(){
    this.onRefreshScale()
    EventBus.$off("refreshScale", this.onRefreshScale)
    EventBus.$on("refreshScale", this.onRefreshScale)
  },
  computed: {
    ...mapState("components", {
      page: state => state.currentPage,
      componentData: state => state.currentComponentData,
      siteAttrs: state => state.attrs,
      siteStatus: state => state.siteStatus,
      fileUploadData: state => state.fileUploadData,
      rightMenu: state => state.rightMenu,
    }),
    ...mapGetters("components", {
      isWbEvent: "isWbEvent",
    }), 
    siteStyles() {
      const styles_ = {}
      if(this.siteAttrs.bgUrl) {
        styles_.backgroundImage = 'url(' + this.siteAttrs.bgUrl + ')'
      } else {
        styles_.backgroundColor = this.siteAttrs.backgroundColor
      }
      return styles_
    },
    isGroup(){
      return this.componentData && this.componentData.components && this.componentData.components.length > 0 ? true : false;
    },
    getPageStyles(page) {
      const pageStyles_ =  {
        backgroundColor: page.attrs.backgroundColor,
        backgroundImage: 'url(' + page.attrs.bgUrl + ')',
        width: getPxOVwByValue(page.attrs.width),
        height: getPxOVwByValue(page.attrs.height),
      }
      bgPositionStyle(pageStyles_, page.attrs.bgPositionRepeatType)
      return pageStyles_
    },
    sitePageStyles(){
      let page = this.page
      let styles_
      let pageStyles = this.getPageStyles(page)
      if(page.type == PAGE_TYPE_.pop){
        styles_= _.cloneDeep(pageStyles)
      }else{
        styles_= _.cloneDeep(this.siteStyles)
        styles_.height = pageStyles.height
        styles_.width = pageStyles.width
      }
      styles_.transform = 'scale(' + 1/PC_WID_HEI.designScale + ')'
      return styles_
    },
  },
  methods: {
    ...mapActions("components", {
      setActiveComponentId: 'setActiveComponentId',
    }),
    onActiveRightEditMemu(compData){
      this.setActiveComponentId(compData);
      // this.recordComponentAttr();
    },
    getCompText(compData){
      if(compData.cid == COMPONENT_TYPES.wb_img && compData.commonAttr.name){
        return compData.title + compData.commonAttr.name;
      }else{
        return compData.title;
      }
    },
    onRefreshScale(){
      if(!this.page){
        return
      }
      this.scaleConStyles.overflow = this.siteAttrs.isPeripheralVisible ? "visible" : "hidden";
      this.scaleConStyles.transform = "scale(" + this.siteStatus.scale + ")";
      this.scaleConStyles.width = parseInt(this.page.attrs.width * this.siteStatus.scale) + "px";
      this.scaleConStyles.height = parseInt(this.page.attrs.height * this.siteStatus.scale) + "px";
    }
  },
  updated(){
    if(this.$refs.focusDom){
      this.$refs.focusDom.focus();
    }
  },
  beforeUnmount(){
    EventBus.$off("refreshScale", this.onRefreshScale)
  }
};
</script>

